<template>
    <div>
        <div class="user" v-show="!pageLoading">
            <van-swipe-cell :right-width="65" :left-width="65">
            <span slot="left">选择</span>
            <van-cell-group>
                <van-cell title="单元格" value="内容" />
            </van-cell-group>
            <span slot="right">删除</span>
            </van-swipe-cell>
            <div class="user-top">
                <img src="~assets/img/member/mine-bg.png">
                <div class="user-top-content">
                    <div class="user-avator">
                        <img src="~assets/img/member/avator.png" />
                    </div>
                    <van-row>{{ memberInfo.contactMobile }}</van-row>
                    <van-row>{{ memberInfo.companyName }}</van-row>
                </div>
            </div>
            <van-row class="user-content">
                <van-cell-group :border="false" class="cell-group">
                    <van-cell :value="memberWalletBalance">
                        <template slot="title">
                            <img src="~assets/img/member/money.png" />
                            <span class="van-cell-text">我的余额</span>
                        </template>
                    </van-cell>
                    <van-cell is-link @click="$router.push({name: 'addressList'})">
                        <template slot="title">
                            <img src="~assets/img/member/position.png" />
                            <span class="van-cell-text">收货地址</span>
                        </template>
                    </van-cell>
                </van-cell-group>
                <van-cell-group class="user-content-bottom">
                    <van-cell @click="$router.push({ name: 'orderList' })" title="我的订单" value="查看所有订单" is-link></van-cell>
                </van-cell-group>
                <van-row class="user-links">
                    <van-col span="6">
                        <router-link :to="{ name: 'orderList', query: { status: 'waitingPay' }}">
                            <div class="img-wrapper">
                                <img src="~assets/img/member/order-waiting-pay.png" />
                                <span class="icon-info" v-show="orderInfo.waitingPayCount">{{ orderInfo.waitingPayCount }}</span>
                            </div>
                            <span>待付款</span>
                        </router-link>
                    </van-col>
                    <van-col span="6">
                        <router-link :to="{ name: 'orderList', query: { status: 'waitingShipping' }}">
                            <div class="img-wrapper">
                                <img src="~assets/img/member/order-waiting-shipping.png" />
                                <span class="icon-info" v-show="orderInfo.waitingShippingCount">{{ orderInfo.waitingShippingCount }}</span>
                            </div>
                            <span>待发货</span>
                        </router-link>
                    </van-col>
                    <van-col span="6">
                        <router-link :to="{ name: 'orderList', query: { status: 'waitingSign' }}">
                            <div class="img-wrapper">
                                <img src="~assets/img/member/order-waiting-sign.png" />
                                <span class="icon-info" v-show="orderInfo.waitingSignCount">{{ orderInfo.waitingSignCount }}</span>
                            </div>
                            <span>待收货</span>
                        </router-link>
                    </van-col>
                    <van-col span="6">
                        <router-link :to="{ name: 'orderList', query: { status: 'haveSigned' }}">
                            <div class="img-wrapper">
                                <img src="~assets/img/member/order-have-signed.png" />
                                <span class="icon-info" v-show="orderInfo.haveSignedCount">{{ orderInfo.haveSignedCount }}</span>
                            </div>
                            <span>已收货</span>
                        </router-link>
                    </van-col>
                </van-row>
            </van-row>
        </div>
        <van-toast type="loading" :mask="true" message="加载中..." v-model="pageLoading" />
    </div>
</template>

<script>
import { formatPrice, thousandBitSeparator } from "@/filters/index";
import { getMemberInfo } from "@/api/member/index";
import { getOrderSummary } from "@/api/order/index";

export default {
  name: "User",
  data() {
    return {
      pageLoading: true,
      loading: false,
      memberInfo: {
        companyName: "",
        contactMobile: "",
        walletBalance: 0.0
      },
      orderInfo: {
        waitingPayCount: 0,
        waitingShippingCount: 0,
        waitingSignCount: 0,
        haveSignedCount: 0
      }
    };
  },
  computed: {
    memberWalletBalance() {
      return (
        "¥" +
        thousandBitSeparator(formatPrice(this.memberInfo.walletBalance, "未知"))
      );
    }
  },
  methods: {
    getData() {
      this.pageLoading = true;
      this.loading = true;
      getMemberInfo()
        .then(res => {
          this.pageLoading = false;
          this.loading = false;
          this.memberInfo.companyName = res.data.companyName;
          this.memberInfo.contactMobile = res.data.contactMobile;
          this.memberInfo.walletBalance = res.data.walletBalance;
          this.memberInfo.walletBalanceFormat = res.data.walletBalanceFormat;
        })
        .catch(res => {
          this.pageLoading = false;
          this.loading = false;
          this.memberInfo.companyName = "";
          this.memberInfo.contactMobile = "";
          this.memberInfo.walletBalance = 0.0;
          this.memberInfo.walletBalanceFormat = 0.0;
        });
      getOrderSummary()
        .then(res => {
          this.orderInfo.waitingPayCount = res.data.waitingPay;
          this.orderInfo.waitingShippingCount = res.data.waitingShipping;
          this.orderInfo.waitingSignCount = res.data.waitingSign;
          this.orderInfo.haveSignedCount = res.data.haveSigned;
        })
        .catch(res => {
          this.orderInfo.waitingPayCount = 0;
          this.orderInfo.waitingShippingCount = 0;
          this.orderInfo.waitingSignCount = 0;
          this.orderInfo.haveSignedCount = 0;
        });
    }
  },
  created() {
    this.getData();
  },
  activated() {
    this.getData();
  }
};
</script>

<style lang="scss">
@import "../../styles/color.scss";
.user {
  &-top {
    width: 100%;
    height: 4rem;
    display: block;
    position: relative;
    & > img {
      height: 100%;
      width: 100%;
    }
  }
  &-top-content {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
    .user-avator {
      width: 1.8rem;
      height: 1.8rem;
      overflow: hidden;
      margin: 0 auto;
      padding-bottom: 5px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .van-row {
      line-height: 20px;
      color: #fff;
    }
  }
  &-content {
    background-color: #f5f5f5;
    .cell-group {
      width: 80%;
      margin: 0 auto;
      margin-top: -0.6rem;
      border-radius: 8px;
      border: 1px solid #f5f5f5;
      overflow: hidden;
      .van-cell {
        padding: 0.2rem 15px;
      }
    }
    .user-content-bottom {
      margin-top: 20px;
      .van-cell {
        padding: 14px 15px;
      }
    }
  }
  &-links {
    text-align: center;
    padding: 20px 0px 15px;
    background-color: #fff;
    a {
      color: #000;
      display: block;
    }
    .img-wrapper {
      width: 26px;
      height: 30px;
      position: relative;
      margin: 0 auto;
      img {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -13px;
      }
      .icon-info {
        left: 100%;
        top: 0;
        font-size: 0.24rem;
        padding: 0 0.3em;
        text-align: center;
        min-width: 0.388rem;
        line-height: 0.388rem;
        position: absolute;
        border-radius: 50%;
        box-sizing: border-box;
        background-color: #f44;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
        color: #ffffff;
      }
    }
    span {
      padding: 10px 0px;
      line-height: 20px;
      display: inline-block;
    }
  }
}
</style>
